<template>
  <div>
    <Form :parameter="queryForm">
      <template #trayCode2="{slotitem}">
        {{slotitem}}
      </template>
    </Form>
    <MenuPage :parameter="MenuPageParameter">
      <template #options="{row}">
        <el-button type="text" @click="edited(row)"
        >修改</el-button>
        <el-button type="text" @click="deleted(row)"
        >删除</el-button>
      </template>
    </MenuPage>
    <!--新增抽屉-->
    <el-drawer
        :title="addF.title" size="400px"
        :visible.sync="addF.visible"
        direction="rtl" >
      <div style="height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: auto;">
        <Form :parameter="addF.Form"></Form>
        <div style="text-align: center;padding: 5px;border-top: 1px solid #eaeaea">
          <el-button type="primary">确定</el-button>
          <el-button>取消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 弹框   -->
    <el-dialog :title="addF.title" :visible.sync="addF.visible" width="500px" append-to-body>
      <div style="height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: auto;">
        <Form :parameter="addF.Form"></Form>
        <div style="text-align: center;padding: 5px;border-top: 1px solid #eaeaea">
          <el-button type="primary">确定</el-button>
          <el-button>取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MenuPage from '@/components/ElmentUI/components/el-new-MenuPage2.4.vue'
import Form from '@/components/ElmentUI/components/el-new-Form2.9.vue'
import MultForm from '@/components/ElmentUI/components/el-new-MultForm1.0.vue'
import api from "./api";
export default {
  components: { MenuPage, Form },
  data() {
    return {
      MenuPageParameter: {
        tableData: {
          reduceHeight:84,
          highlightCurrentRow: true,   //单击选中行
          //内容
          list: [],
          //表头
          title: [
            { prop: 'provider', label: '承运商' },
            { prop: '', label: '联系人' },
            { prop: 'mobile', label: '手机号' },
            { prop: 'truck_no', label: '车牌号'  },
            { prop: 'type2', label: '类型' },
            { prop: '', label: '园区' },
            { prop: 'options', label: '园区', slot:true },
          ],
          singleSelectChange({currentRow,oldCurrentRow}){
            console.log(currentRow, oldCurrentRow);
          },
          handleSelectionChange(v){
            console.log(v);
          },
          getSummaries:(param)=>{
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '合计';
              }else if(column.property==='quality_availabe_num'){
                sums[index] = this.total.sumAvailabe
              }else if(column.property==='quality_total_num'){
                sums[index] = this.total.sumQualityTota
              }else if(column.property==='total_num'){
                sums[index] = this.total.sumTotal
              }else if(column.property==='quality_used_num'){
                sums[index] = this.total.sumUsed
              }

            });
            return sums;
          }
        },
        pagetion: {
          pageCollection: [100,200,300,400],
          pageNo: 1,
          pageSize: this.MenuPageParameter.pagetion.pageCollection[0],
          total: 1,
          handleSizeChange: (val) => {
            this.MenuPageParameter.pagetion.pageSize = val
            this.getList()
          },
          handleCurrentChange: (val) => {
            this.MenuPageParameter.pagetion.pageNo = val
            this.getList()
          },
        },
      },
      queryForm:{
        conditionList: [
          {
            layerStyle: {   display: 'flex','flex-wrap': 'wrap',padding: '5px',gap: '20px 5px' },
            btnList: [
              {
                type: 'text', iconRight:'el-icon-arrow-down',iconLeft:'',
                name: '更多',style:{'margin-left': '6px'},
                action: (ruleForm) => {
                  ruleForm.validate((valid) => {
                    if (valid) {
                      alert('submit!');
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                  });
                },
              },
              {
                type: 'text',iconRight:'el-icon-arrow-up',iconLeft:'',
                name: '收起',style:{'margin-left': '6px'},
                action: (ruleForm) => {

                },
              },
            ],
            btnLayerStyle: {},
            labelWidth: '100px',
            formList:[
              { key: 'trayCode', type: 'input', name: '站台编号', },
              { key: 'trayCode2', type: 'slot', name: 'slot', },
            ],
          },
          {
            layerStyle: {   display: 'flex','flex-wrap': 'wrap',padding: '5px',gap: '20px 5px' },
            btnList: [
              {
                type: 'text', iconRight:'el-icon-arrow-down',iconLeft:'',
                name: '更多',style:{'margin-left': '6px'},
                action: (ruleForm) => {
                  ruleForm.validate((valid) => {
                    if (valid) {
                      alert('submit!');
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                  });
                },
              },
              {
                type: 'text',iconRight:'el-icon-arrow-up',iconLeft:'',
                name: '收起',style:{'margin-left': '6px'},
                action: (ruleForm) => {

                },
              },
            ],
            btnLayerStyle: {},
            labelWidth: '100px',
            formList:[
              {
                key: 'businessLicenseFile', type: 'upload', name: '营业执照附件',  width:'320px', fileList:[],
                limit: 1,
                handleChange(file, fileList){
                  this.fileList = fileList
                }
              },
            ],
          },
          {
            layerStyle: {   display: 'flex','flex-wrap': 'wrap',padding: '5px',gap: '20px 5px' },
            btnList: [
              {
                type: 'text', iconRight:'el-icon-arrow-down',iconLeft:'',
                name: '更多',style:{'margin-left': '6px'},
                action: (ruleForm) => {
                  ruleForm.validate((valid) => {
                    if (valid) {
                      alert('submit!');
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                  });
                },
              },
              {
                type: 'text',iconRight:'el-icon-arrow-up',iconLeft:'',
                name: '收起',style:{'margin-left': '6px'},
                action: (ruleForm) => {

                },
              },
            ],
            btnLayerStyle: {},
            labelWidth: '100px',
            formList:[
              {
                key: 'deptName', type: 'cascader', name: '所属部门', elFormItemStyle:{'grid-column': '1 / 3'},
                options:[ ],
                onChange(){},
                focus(){}
              },
              {
                key: 'vehicleModel', type: 'select', name: '车型', width:'100%', elFormItemStyle:{flex:'0 0 250px'},
                options:[
                  {label:'牵引车',value:'牵引车'},
                  {label:'槽罐车',value:'槽罐车'},
                ],
                onChange(){},
                focus(){},
              },
            ],
          },
        ],
        form:{ },
        rules: {
          trayCode: [
            { required: true, message: '请输入', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        },
      },
      addF:{
        visible:false, title:'新增',
        Form:{
          conditionList: [
            {
              key: 'model', type: 'select', name: '车型',
              options: [
                {label:'侧帘车',value:'侧帘车'},
                {label:'飞翼车',value:'飞翼车'},
                {label:'平板',value:'平板'},
                {label:'厢式',value:'厢式'},
                {label:'依维柯',value:'依维柯'},
                {label:'面包车',value:'面包车'},
                {label:'集装箱',value:'集装箱'},
                {label:'冷藏',value:'冷藏'},
              ],
              onChange(){},
              focus(){},
            },
            {
              key: 'length', type: 'select', name: '车长',
              options: [
                {label:'4.2米',value:'4.2米'},
                {label:'6.8米',value:'6.8米'},
                {label:'9.6米',value:'9.6米'},
                {label:'12.5米',value:'12.5米'},
                {label:'13.5米',value:'13.5米'},
                {label:'16米',value:'16米'},
                {label:'17.5米',value:'17.5米'},
                {label:'20GP',value:'20GP'},
                {label:'40GP',value:'40GP'},
                {label:'40HC',value:'40HC'},
                {label:'40HQ',value:'40HQ'},
              ],
              onChange(){},
              focus(){},
            },
            { key: 'maxVolume', type: 'input', name: '最大容积',  },
            { key: 'maxWeight', type: 'input', name: '最大载重',  },
          ],
          form:{ },
          rules: {
            model: [
              { required: true, message: '请输入', trigger: 'blur' },
            ],
            length: [
              { required: true, message: '请输入', trigger: 'blur' },
            ],
            maxVolume: [
              { required: true, message: '请输入', trigger: 'blur' },
            ],
            maxWeight: [
              { required: true, message: '请输入', trigger: 'blur' },
            ],
          },
          layerStyle: {   display: 'flex','flex-wrap': 'wrap',padding: '5px 20px',gap: '20px 5px' },
          btnLayerStyle: { width: '100%',display: 'flex','flex-wrap': 'wrap',gap: '20px 5px','justify-content': 'center' },
          btnList: [
            {
              type: 'text', iconRight:'el-icon-arrow-down',iconLeft:'',
              name: '更多',style:{'margin-left': '6px'},
              action: (ruleForm) => {
                ruleForm.validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              },
            },
            {
              type: 'text',iconRight:'el-icon-arrow-up',iconLeft:'',
              name: '收起',style:{'margin-left': '6px'},
              action: (ruleForm) => {

              },
            },
          ],
        },
        ok:()=>{
          let api2 = api.updated
          if(this.addF.title==='新增'){
            api2 = api.added
          }
          api2(this.addF.Form.form).then(res=>{
            this.addF.visible = false
            this.getList()
          })
        }
      },
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      let prams = {
        ...this.MenuPageParameter.pagetion,
        pageIndex: this.MenuPageParameter.pagetion.pageNo,
        ...this.queryForm.form
      }
      api.getInfo(prams).then(res=>{
        this.MenuPageParameter.tableData.list = res.data.list
        this.MenuPageParameter.pagetion.total = res.data.pageCount
      })
    },
    edited(row){
      console.log(row);
      this.addF.Form.form = JSON.parse(JSON.stringify(row))
      this.addF.visible = true
      this.addF.title = '编辑'
    },
    deleted(row){
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleted({ volumeWeightId: row.volumeWeightId}).then(res=>{
          this.getList()
        })
      })
    },
  }
}
</script>

<style scoped lang="scss">
</style>
